接著到產品列表頁啦～除了本頁基本的三大元素外，還會涉及到網址結構，那就繼續摳頂吧～

目錄

• Routing
• 產品頁大圖
• Filter
• 產品列表
• 程式碼

Routing

NUXT3真是一個好東西，它的Router設定只要把檔案放在pages資料夾裡，就會自動幫你配好routing。
而我規劃的路由會長這樣：http://localhost:3000/product/[cateName]，所以資料夾結構會長這樣：

• pages
  • [category]
    • [products] <-- 產品列表在這一頁
      原本這一頁在一開始規劃專案的時候想放在productList.vue，但

產品頁大圖

就是個image，沒什麼好說的

Filter

由於之前對API時沒設想好，所以這邊Filter的功能UI得改一下，把Category拿掉：

產品列表

產品列表拉資料出來的方式跟landing page一樣，滑到底就拉出更多資料，不過我這邊想一個batch 8筆資料而非4筆。因為跟首頁是一樣的元件，所以可以把這部分拉出來做component做共用元件。
所以要做的事情有：

1. 拉產品列表的
2. 元件出來
3. props要傳產品列表、定義每次呼叫API可以拉幾筆資料出來

程式碼

<script lang="ts" setup>
import type { ProductDetailModel } from '~/models/apiModel';

type Props = {
    productList: Array<ProductDetailModel>;
}

const props = withDefaults(defineProps<Props>(), {
    productList: () => ([]),
});

</script>
<template>
    <div v-for="prod in productList" :key="prod.id">
        <p>{{ prod.brand }} - {{ prod.title }}</p>
        <img :src="prod.thumbnail" alt="">
        <p>{{ prod.price }} cad</p>
        <p>{{ prod.stock }} left</p>
        <p>rating: {{ prod.rating }}</p>
        <button>add to cart</button>
    </div>
</template>